<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

</head>
<style>

    header a {
        text-decoration: none;
        color: #6c6c6c;
        display: inline-block;
        margin: 0px 0px;
        font-size: 20px;
    }

    el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
        width: 100%;
    }

    el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
        width: 100%;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .footer {
        margin: 0 auto;
        height: 415px;
        background-color: #f5f5f5;
        padding-top: 30px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto;background-color: #fff;
font: 25px/1.5 -apple-system,BlinkMacSystemFont,PingFang SC,Microsoft yahei,arial,PingFangSC-Regular,sans-serif;">
                <a href="/"><img src="../imgs/logo.png" style="width: 50px;margin-left: 50px;vertical-align: middle" alt=""></a>
                <a href="index.html" style="margin-left: 50px">首页</a>
                <el-divider direction="vertical"></el-divider>
                <a href="fashourili.html" style="margin-left: 30px">发售日历</a>
                <el-divider direction="vertical"></el-divider>
                <a href="/" style="margin-left: 30px">关于我们</a>
                <el-divider direction="vertical"></el-divider>
                <a href="helloeui.html" style="margin-left: 30px">公告</a>
                <el-divider direction="vertical"></el-divider>
                <a href="personal.html" style="margin-left: 30px">个人中心</a>
                <el-divider direction="vertical"></el-divider>
                <span style="margin-left: 200px;"><a href="login.html">登录</a>
  |
    <a href="reg.html">注册</a></span>
            </div>
        </el-header>

        <div style="margin-top: 30px;background-image: url('../imgs/brackgroup.png');width: 100%;height: 350px;text-align: center">
            <a href="" style="display:inline-block;">
                <div class="block">
                    <el-avatar :size="150" :src="circleUrl"></el-avatar>
                </div>
            </a>
            <br>
            <el-button type="text"><h3>用户名<i class="el-icon-edit"></i></h3></el-button>
        </div>
        <el-container>
            <el-aside>
                <div>
                    <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            @select="handleSelect">

                        <el-menu-item index="1">
                            <template slot="title">
                                <span><i class="el-icon-bank-card"></i>我的钱包</span>
                            </template>
                        </el-menu-item>

                        <el-menu-item index="2">
                            <template slot="title">
                                <span><i class="el-icon-present"></i>我的藏品</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <template slot="title">
                                <span><i class="el-icon-tickets"></i>我的订单</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="6">
                            <template slot="title">
                                <span><i class="el-icon-s-help"></i>我的合成</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="7">
                            <template slot="title">
                                <span><i class="el-icon-s-comment"></i>我的消息</span>
                            </template>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-main id="main">
                <el-aside style="width: 100%">
<!--                    1-->
                    <div>
                        <div v-if="currentIndex=='1'">
                            <h1>总资产</h1>
                            <button type="button" style="height: 50px"> 提现 <i class="el-icon-setting"></i></button>
                        </div>
                        <div  v-if="currentIndex=='1'" style="width: 100%">
                        <el-menu
                                default-active="1-1"
                                class="el-menu-demo"
                                mode="horizontal"
                                @open="handleOpen"
                                @select="handleSelect1">
                            <el-menu-item index="1-1">全部</el-menu-item>
                            <el-menu-item index="1-2">支出</el-menu-item>
                            <el-menu-item index="1-3">收入</el-menu-item>
                            <el-menu-item index="1-4">提现</el-menu-item>
                        </el-menu>
                        </div>
                    </div>
<!--                    2-->
                    <div>
                        <div>
                            <el-menu>
                                <el-table v-if="currentIndex=='2'"
                                          :data="productArr"
                                          style="width: 100%">
                                    <el-table-column type="index" label="编号"></el-table-column>
                                    <el-table-column prop="title" label="商品标题" width="200"></el-table-column>
                                    <el-table-column prop="price" label="价格" width="80"></el-table-column>
                                    <el-table-column prop="oldPrice" label="原价" width="80"></el-table-column>
                                    <el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
                                    <el-table-column
                                            label="商品图片"
                                            width="100">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.url" width="100%">
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-menu>
                        </div>
                    </div>
<!--                3-->
                    <div v-if="currentIndex=='3'">
                        <el-menu
                                default-active="3-1"
                                class="el-menu-demo"
                                mode="horizontal"
                                @open="handleOpen"
                                @select="handleSelect1">
                            <el-menu-item index="3-1">全部</el-menu-item>
                            <el-menu-item index="3-2">进行中</el-menu-item>
                            <el-menu-item index="3-3">已完成</el-menu-item>
                            <el-menu-item index="3-4">已取消</el-menu-item>
                        </el-menu>
                    </div>
                    <div  v-if="currentIndex=='7'" style="width: 100%">
                       <h1>暂无消息</h1>
                    </div>
                </el-aside>

                <el-main id="1-1">
                    <div v-if="currentIndex1=='1-1'">
                        <div>
                            <table>
                                <tr>
                                    <th>流水ID</th>
                                    <th>用户ID</th>
                                    <th>流水类型</th>
                                    <th>流水</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in wallet">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.wallet_type}}</td>
                                    <td>{{i.wallet_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='1-2'">
                        <div>
                            <table>
                                <tr>
                                    <th>流水ID</th>
                                    <th>用户ID</th>
                                    <th>流水类型</th>
                                    <th>流水</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in wallet" v-if="i.wallet_type==1">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.wallet_type}}</td>
                                    <td>{{i.wallet_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='1-3'">
                        <div>
                            <table>
                                <tr>
                                    <th>流水ID</th>
                                    <th>用户ID</th>
                                    <th>流水类型</th>
                                    <th>流水</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in wallet" v-if="i.wallet_type==2">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.wallet_type}}</td>
                                    <td>{{i.wallet_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='1-4'">
                        <div>
                            <table>
                                <tr>
                                    <th>流水ID</th>
                                    <th>用户ID</th>
                                    <th>流水类型</th>
                                    <th>流水</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in wallet" v-if="i.wallet_type==3">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.wallet_type}}</td>
                                    <td>{{i.wallet_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>


<!-- 订单-->
                    <div v-if="currentIndex1=='3-1'">
                        <div>
                            <table>
                                <tr>
                                    <th>订单ID</th>
                                    <th>用户ID</th>
                                    <th>藏品ID</th>
                                    <th>订单进程号</th>
                                    <th>订单金额</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in zoreArr">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.product_id}}</td>
                                    <td>{{i.order_type}}</td>
                                    <td>{{i.order_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='3-2'">
                        <div>
                            <table>
                                <tr>
                                    <th>订单ID</th>
                                    <th>用户ID</th>
                                    <th>藏品ID</th>
                                    <th>订单进程号</th>
                                    <th>订单金额</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in zoreArr" v-if="i.order_type==1">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.product_id}}</td>
                                    <td>{{i.order_type}}</td>
                                    <td>{{i.order_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='3-3'">
                        <div>
                            <table>
                                <tr>
                                    <th>订单ID</th>
                                    <th>用户ID</th>
                                    <th>藏品ID</th>
                                    <th>订单进程号</th>
                                    <th>订单金额</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in zoreArr" v-if="i.order_type==2">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.product_id}}</td>
                                    <td>{{i.order_type}}</td>
                                    <td>{{i.order_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentIndex1=='3-4'">
                        <div>
                            <table>
                                <tr>
                                    <th>订单ID</th>
                                    <th>用户ID</th>
                                    <th>藏品ID</th>
                                    <th>订单进程号</th>
                                    <th>订单金额</th>
                                    <th>下单时间</th>
                                </tr>
                                <tr v-for="i in zoreArr" v-if="i.order_type==3">
                                    <td>{{i.id}}</td>
                                    <td>{{i.user_id}}</td>
                                    <td>{{i.product_id}}</td>
                                    <td>{{i.order_type}}</td>
                                    <td>{{i.order_money}}</td>
                                    <td>{{i.create_time}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </el-main>
            </el-main>
        </el-container>
        <el-footer>
        </el-footer>
    </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            currentIndex: "1",
            currentIndex1: "1-1",
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            sizeList: ["large", "medium", "small"],
            activeIndex: '1',
            productArr:[],
            zoreArr: {},
            wallet:{}
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                if (key == "1") {
                    console.log("asssasasas")
                    v.currentIndex = key;
                    v.currentIndex1="1-1";
                }else if (key=="3"){
                    v.currentIndex=key;
                    v.currentIndex1="3-1";
                }
                else if (key=="7"){
                    v.currentIndex=key;
                    v.currentIndex1="";
                }else if (key=="2"){
                    v.currentIndex=key;
                    v.currentIndex1="";
                }
            },
            handleSelect1(key, keyPath) {
                if (key == "1-1") {
                    v.currentIndex1 = key;
                }else if (key=="1-2"){
                    v.currentIndex1=key;
                }else if(key=="1-3"){
                    v.currentIndex1=key;
                }else if (key=="1-4"){
                    v.currentIndex1=key;
                }else if (key=="3-1"){
                    v.currentIndex1=key;
                }else if (key=="3-2"){
                    v.currentIndex1=key;
                }else if (key=="3-3"){
                    v.currentIndex1=key;
                }else if (key=="3-4"){
                    v.currentIndex1=key;
                }
            }
        },
        created:function () {
            axios.get("/order/zoreselect").then(function (response) {
                v.zoreArr = response.data;
            }),
        axios.get("/wallet/walletselect").then(function (response) {
                    v.wallet = response.data;
        })
        }
    })
</script>
</html>